<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影评论</title>
    <%- include conmon %>
</head>

<body>
    <!-- 头部 -->
    <%- include('header',{title:"mlist"}) %>

    <div class="container-fluid container">
        <div class="row">
            <h2 class="text-danger">修改评论----( 用户： <%- username %> )</h2>
            <!-- 显示当前每页显示条数 -->
            <div class="form-group col-md-3">
                <select onchange="setPageSize()" class="form-control" id="changePage">
                    <option value="5" <%- pageSize===5?'selected':''; %> >每页显示5条</option>
                    <option value="8" <%- pageSize===8?'selected':''; %> >每页显示8条</option>
                    <option value="10" <%- pageSize===10?'selected':''; %> >每页显示10条</option>
                    <option value="15" <%- pageSize===15?'selected':''; %> >每页显示15条</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class=" table table-bordered table-hover">
                    <tr class="text-center text-primary">
                        <td>序号</td>
                        <td>电影标题</td>
                        <td>电影</td>
                        <td>评论标题</td>
                        <td>评论内容</td>
                        <td>评论人</td>
                        <td>时间</td>
                        <td>操作1</td>
                        <td>操作2</td>
                    </tr>
                    <%    if(result.length > 0){   %>
                    <%        result.forEach((item,index)=>{    %>
                    <tr class="text-center text-success">
                        <td><%- index+1 %></td>
                        <td><a href="/comment/allcomment?mtitle=<%- item.mtitle %>"> <%- item.mtitle %> </a></td>
                        <td><img style="width: 80px;height: 80px;"
                                src=" <%- item.mpic && item.mpic.replace(/img7/,'img3') %> " alt=""></td>
                        <td><%- item.title %></td>
                        <td><%- item.content %></td>
                        <td><a href="/comment/allcomment?username=<%- item.username %>"><%- item.username %></a></td>
                        <td><%- item.time %></td>
                        <td>
                            <button onclick="setId('<%- item._id %>')" data-toggle="modal" data-target="#delbox" <%- username===item.username?"":"disabled"  %>  class="btn btn-danger" >删除</button>
                        </td>
                        <td>
                        <%    if(item.username === username){  %>
                                <button data-item='<%- JSON.stringify(item) %>' onclick="getItem(this)" class="btn btn-primary" data-toggle="modal" data-target="#updatebox">修改</button>
                        <%    }else{     %>
                                <button class="btn btn-primary" disabled>无权限</button>
                        <%    }    %>
                            
                        </td>
                    </tr>
                    <%        })     %>
                    <%   }else{      %>
                    <!-- 没有评论 -->>
                    <tr>你还没有评论，快去评论。。。</tr>
                    <%  }    %>
                </table>
            </div>
            <div class="row text-center">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="<%- pageNo-1<1?'disabled':'' %>">
                            <a href="/comment/mlist?pageNo= <%- pageNo-1 %> " aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="<%- pageNo-1<1?'disabled':'' %>"><a href="/comment/mlist?pageNo= <%- pageNo-2 %> "> <%- pageNo-2 %> </a></li>
                        <li class="<%- pageNo-1<1?'disabled':'' %>"><a href="/comment/mlist?pageNo= <%- pageNo-1 %> "> <%- pageNo-1 %> </a></li>
                        <li class="active"><a href="/comment/mlist?pageNo= <%- pageNo %> "> <%- pageNo %> </a></li>
                        <li class="<%- pageNo+1>totalPage?'disabled':'' %>"><a href="/comment/mlist?pageNo= <%- pageNo+1 %> "> <%- pageNo+1 %> </a></li>
                        <li class="<%- pageNo+1>totalPage?'disabled':'' %>"><a href="/comment/mlist?pageNo= <%- pageNo+2 %> "> <%- pageNo+2 %> </a></li>
                        <li class="<%- pageNo+1>totalPage?'disabled':'' %>">
                            <a href="/comment/mlist?pageNo= <%- pageNo+1 %> " aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 删除-模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-danger">删除操作</h4>
                </div>
                <div class="modal-body">
                    <p>确认要删除吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="deleteById()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 修改-模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="updatebox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-danger">修改评论</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="titleInput" class="col-sm-2 control-label">评论标题</label>
                        <input type="text" class="form-control" id="titleInput">
                    </div>
                    <div class="form-group">
                        <label for="contentInput" class="col-sm-2 control-label">评论内容</label>
                        <textarea class="form-control" id="contentInput" cols="30" rows="10"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="updateComment()">修改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 尾部 -->
    <%- include footer %>
    <script>
        /* 
            点击删除删除按钮-获取当前id
            点击模态框按钮传id到后端
        */
        var id = null;  //获取id
        function setId(uid){
            id = uid;
        }
        // 通过id删除数据
        function deleteById(){
            $.ajax({
                url:'/comment/delete',
                type:'GET',
                data:{
                    _id:id
                }
            }).then(res=>{
                console.log(res);
                location.reload(); //刷新页面
            })
        }

        // 获取数据
        var obj = {};
        function getItem(that){  //通过获取标签属性来获取item数据
            obj = JSON.parse($(that).attr("data-item")); //获取标签属性值
            $('#titleInput').val(obj.title);  //模块框赋值
            $('#contentInput').val(obj.content);
        }

        // 修改数据
       function updateComment(){
            $.ajax({
                url:'/comment/update',
                type:'POST',
                data:{
                    title:$('#titleInput').val(),
                    content:$('#contentInput').val(),
                    _id:obj._id
                }
            }).then(res=>{
                console.log(res);
                location.reload();//刷新页面
            })
       }

       //修改每页显示数量
       function setPageSize(){
            location.href='/comment/mlist?pageSize='+ $('#changePage').val();
       }
    </script>
</body>

</html>